<template>
	<view class="publish">
		<view class="publish-header">
			<ul>
				<li>
					<div class="option">
						<text>{{this.option[0].title}}</text>
						<ol>
							<li v-for="(item,i) in this.option[0].sign" :class="time==i?'active':''"
								@click="addTime(i,item)">{{item.type}}</li>
						</ol>
					</div>
				</li>
				<li>
					<div class="option">
						<text>{{this.option[1].title}}</text>
						<ol>
							<li v-for="(item,i) in this.option[1].sign" :class="status==i?'active':''"
								@click="addStatus(i,item)">{{item.type}}</li>
						</ol>
					</div>
				</li>
				<li>
					<div class="option">
						<text>{{this.option[2].title}}</text>
						<ol>
							<li v-for="(item,i) in this.option[2].sign" :class="price==i?'active':''"
								@click="addPrice(i,item)">{{item.type}}</li>
						</ol>
					</div>
				</li>
			</ul>
		</view>
		<view class="publish-baner">
			<view class="line">
				——— <text>推薦</text> ———
			</view>
			<view class="publish-list">
				<ul>
					<li v-for="(item, index) in publicList" @click="addJumpDetail(item)">
						<view class="list-con">
							<view class="list-img">
								<image :src="item.iconUrl" mode=""></image>
							</view>
							<div class="list-text">
								<div class="list-name">
									<p>{{index+1}}.{{item.title}}</p>
								</div>
								<div class="list-author">
									<div class="icon">
										<text>{{item.author}}</text>
										<div class="box">{{item.category}}</div>
									</div>
									<div class="boxAll">

										<text v-if="item.bookStatus==0?true:false">{{item.readCount}}人阅读 | 连载中</text>
										<text v-if="item.bookStatus==1?true:false">{{item.readCount}}人阅读 | 已完结</text>
									</div>
								</div>
								<div class="list-detail">
									<text v-html="item.description"></text>
								</div>
							</div>
						</view>
					</li>
				</ul>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getFilter
	} from '@/api/index.js';
	export default {
		data() {
			return {
				index: 0,
				isShow: true,
				publicList: [],
				list: [{
						text: '日榜',
						type: 'day'
					},
					{
						text: '周榜',
						type: 'week'
					},
					{
						text: '月榜',
						type: 'month'
					}
				],
				option: [{
					title: '时间：',
					sign: [{
						type: '最热',
						sort: 2
					}, {
						type: '最新',
						sort: 1
					}]
				}, {
					title: '进度：',
					sign: [{
						type: '全部',
						status: 0
					}, {
						type: '连载中',
						status: 1
					}, {
						type: '已完成',
						status: 2
					}]
				}, {
					title: '价格：',
					sign: [{
						type: '全部',
						pay: 0,
					}, {
						type: '免费',
						pay: 1,
					}, {
						type: '付费',
						pay: 2,
					}]
				}],
				cateId: 0,
				cateName: '',
				gender: '',
				time: 0,
				status: 0,
				price: 0,
				sort: 0
			}
		},
		onLoad(options) {
			this.cateName = JSON.parse(options.data).type;
			this.cateId = JSON.parse(options.data).cateId;
			this.gender = JSON.parse(options.data).channel;

			getFilter(this.cateId, this.gender, 2, this.price, this.status).then(content => {
				console.log(content);
				uni.showLoading({
					title: '正在加载中...'
				})

				let {
					code,
					data: {
						books
					}
				} = content;
				this.publicList = books;
				uni.hideLoading()

			}).catch(error => {
				console.log(error);
			})

		},
		methods: {
			async addTime(i, item) {
				this.time = i;
				console.log('11',item.sort);
				console.log('22',this.status);
				console.log('33',this.price);
				this.sort = item.sort
				uni.showLoading({
					title: '加载中',
				})
				await getFilter(this.cateId, this.gender, this.sort, this.price, this.status).then(content => {
						let {
							code,
							data: {
								books
							}
						} = content;
						if (books) {
							this.publicList = books;
						}
						console.log(books);
						uni.hideLoading();
					})
					.catch(error => {
						console.log(error);
					})

			},

			async addStatus(i, item) {
				this.status = i;
				this.status = item.status
				
				await getFilter(this.cateId, this.gender, this.sort, this.price, this.status).then(content => {
						let {
							code,
							data: {
								books
							}
						} = content;
						if (books) {
							this.publicList = books;
						}
						console.log(books);
						uni.hideLoading();
					})
					.catch(error => {
						console.log(error);
					})
			},
			async addPrice(i, item) {
				this.price = i;
				this.price = item.pay
				console.log(item.pay);
				await getFilter(this.cateId, this.gender, this.sort, this.price, this.status).then(content => {
						let {
							code,
							data: {
								books
							}
						} = content;
						if (books) {
							this.publicList = books;
						}
						console.log(books);
						uni.hideLoading();
					})
					.catch(error => {
						console.log(error);
					})
			},

			addJumpDetail(item) {
				console.log(item);
				this.book_id = item.sourceUrl.slice(8);
				console.log(this.book_id);
				this.category = item.category;
				this.description = item.description
				let data = {
					'id': this.book_id,
					'category': this.category,
					'description': this.description
				}
				uni.navigateTo({
					url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			}

		}

	}
</script>

<style lang="scss">
	.publish {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		opacity: 1;
		overflow: hidden;

		.publish-header {
			width: 90%;
			height: 250rpx;
			opacity: 0.75;
			margin: 40rpx auto 0;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: rgba(190, 145, 97, 1);
			box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1);

			ul {
				width: 90%;
				height: 100%;
				padding: 0;
				margin: 0 auto;
				list-style: none;
				overflow: hidden;

				li {
					margin-top: 10rpx !important;

					.option {
						// margin-top: 20rpx;
						display: flex;
						align-items: center;

						text {
							color: #000;
							font-size: 16px;
							// font-weight: 600;
						}

						ol {
							display: flex;
							padding: 0;
							margin: 0;
							list-style: none;

							li {
								// width: 80rpx;
								// height: 50rpx;
								// margin-top: 3rpx;
								background-color: #fceccc;
								color: rgba(89, 89, 89, 1);
								border-radius: 8px;
								text-align: center;
								// line-height: 50rpx;
								font-size: 12px;
								padding: 8rpx 18rpx;
								box-sizing: border-box;
								border: 1px solid #fd6537;
								margin-right: 20rpx;

								&.active {
									background-color: #fd6537;
									color: #fceccc;
									transition: all .3s;
									border: 1px solid #fd6537;
								}
							}
						}
					}

				}
			}
		}

		.publish-baner {
			width: 100%;
			background-color: #fceccc;
			overflow: hidden;

			.line {
				width: 500rpx;
				margin: 30rpx auto;
				text-align: center;
				color: rgba(166, 166, 166, 1);

				text {
					color: #000;
					padding: 0 30rpx;
					font-size: 17px;
				}
			}

			.publish-list {
				width: 100%;

				ul {
					width: 90%;
					padding: 0;
					margin: 40rpx auto 0;
					list-style: none;

					li {
						width: 100%;
						height: 280rpx;
						// background-color: pink;
						margin-bottom: 60rpx;
						box-sizing: border-box;

						.list-con {
							display: flex;
							width: 100%;
							height: 100%;

							.list-img {
								width: 480rpx;
								height: 100%;

								image {
									width: 200rpx;
									height: 100%;
									border-radius: 20rpx;
									border: 1px solid #fd6143;

								}
							}

							.list-text {
								margin: 0 20rpx 0 40rpx;
								width: 1000rpx;
								height: 100%;
								overflow: hidden;

								.list-name {
									margin: 5rpx 0 12rpx 0;

									p {
										font-family: '苹方';
										font-size: 18px;
										font-weight: 600;
										color: rgba(59, 59, 59, 1);
										text-overflow: ellipsis;
										overflow: hidden;
										word-break: break-all;
										white-space: nowrap;
									}
								}
							}

							.list-author {
								display: flex;
								width: 100%;
								margin-top: 20rpx;
								flex-direction: column;
								// align-items: center;
								flex-wrap: wrap;

								.icon {
									display: flex;

									text {
										// width: 100%;
										font-size: 14px;
										color: rgba(168, 168, 168, 1);
										text-overflow: ellipsis;
										overflow: hidden;
										word-break: break-all;
										white-space: nowrap;
									}

									.box {
										padding: 5rpx 10rpx;
										background-color: #fce2b2;
										font-size: 10px;
										// font-weight: 600;
										border-radius: 10rpx;
										color: rgba(119, 130, 138, 1);
										text-align: center;
										line-height: 28rpx;
										border: 1px solid #fd6143;
										margin-left: 20rpx;
									}
								}




								.boxAll {
									width: 100%;
									display: flex;

									text {
										font-size: 14px;
										color: rgba(119, 130, 138, 1);
										margin-top: 20rpx;
									}
								}

							}

							.list-detail {
								margin: 20rpx 0 0;
								font-size: 15px;
								color: rgba(119, 130, 138, 1);
								height: 80rpx;
								overflow: hidden;

								text {
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
							}
						}
					}
				}

			}

		}

	}
</style>